<template>
  <view class="content">
    <view class="section-0">
      <view class="section-body">
        <view class="top-tab">
          <view class="form">
            <view class="form-item">
              <view class="label">关键字</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  v-model="name"
                  class="input-body"
                ></u--input>
              </view>
            </view>
            <view class="actions">
              <view class="action" @click="handleResetForm()">
                <text>重</text>
                <text>置</text>
              </view>
              <view class="action search" @click="handleSearch()">
                <text>查</text>
                <text>询</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="section-2">
      <view class="table-container">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 300px">
          <tr>
            <th style="width: 63px">物料描述</th>
            <th style="width: 43px">序号</th>
            <th style="width: 63px">批次</th>
            <th style="width: 63px">物料编码</th>
            <th style="width: 63px">物料描述</th>
            <th style="width: 63px">物资数量</th>
            <th style="width: 63px">度量单位文本</th>
            <th style="width: 63px">中标单价</th>
            <th style="width: 63px">中标总价</th>
            <th style="width: 63px">供应商名称</th>
            <th style="width: 63px">供应商联系人</th>
            <th style="width: 93px">供应商联系人电话</th>
            <th style="width: 93px">合同计划交货日期</th>
            <th style="width: 63px">确定交货期</th>
          </tr>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              {{ item.wz_detail }}
            </td>
            <td>
              {{ index + 1 }}
            </td>
            <td>
              {{ item.wz_uno ? item.wz_uno.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.wl_no ? item.wl_no.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.wz_detail }}
            </td>
            <td>
              {{ item.ht_count ? item.ht_count.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.measure_dw ? item.measure_dw.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.unit_price ? item.unit_price.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.price ? item.price.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.supplier ? item.supplier.substring(0, 10) : "-" }}
            </td>
            <td>
              {{
                item.supplier_link_name
                  ? item.supplier_link_name.substring(0, 10)
                  : "-"
              }}
            </td>
            <td>
              {{
                item.supplier_link_phone
                  ? item.supplier_link_phone.substring(0, 10)
                  : "-"
              }}
            </td>
            <td>
              {{ item.xcxq_time ? item.xcxq_time.substring(0, 10) : "-" }}
            </td>
            <td>
              {{ item.wzgy_time ? item.wzgy_time.substring(0, 10) : "-" }}
            </td>
          </tr>
        </table>
      </view>
    </view>
  </view>
</template>

<script>
import { aMaterIalsSuppliedList } from "@/api/project_manage.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      name: "",
      id: "",
      list: [],
    };
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    // 重置
    handleResetForm() {
      this.name = "";
      this.handleSearch();
    },
    // 查询
    handleSearch() {
      if (this.id) {
        aMaterIalsSuppliedList({
          project_id: this.id,
          wz_detail: this.name,
        }).then((obj) => {
          console.log(obj.data.data);
          let data = obj.data.data;
          this.list = data.data;
        });
      } else {
        aMaterIalsSuppliedList({
          project_id: this.curProject.id,
          wz_detail: this.name,
        }).then((obj) => {
          let data = obj.data.data;
          this.list = data.data;
        });
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.handleSearch();
  },
};
</script>

<style lang="scss" scoped>
.content {
  .section-0 {
    width: 100%;
    background-color: #3a5df5;
    .section-body {
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding-top: 18rpx;
      .top-tab {
        width: 100%;
        .form {
          width: 100%;
          padding: 0 75rpx;
          padding-top: 40rpx;
          box-sizing: border-box;
          .form-item {
            width: 600rpx;
            height: 48rpx;
            border-radius: 20rpx;
            border: solid 2rpx #1534ce;
            margin: 0 auto;
            margin-bottom: 25rpx;
            &:last-child {
              margin-bottom: 34rpx;
            }
            @include clear();
            .label {
              float: left;
              width: 134rpx;
              height: 48rpx;
              text-align: center;
              line-height: 44rpx;
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: #1534ce;
            }
            .shape {
              width: 3rpx;
              height: 32rpx;
              background-color: #7f98ae;
              float: left;
              margin-top: 8rpx;
            }
            .input {
              float: left;
              width: calc(100% - 134rpx - 3rpx);
              .input-body {
                box-sizing: border-box;
                width: 100%;
                height: 44rpx;
                padding: 0 !important;
                border: none;
                padding-left: 30rpx !important;
                padding-right: 30rpx !important;
                font-size: 26rpx;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rpx;
                color: rgba(0, 0, 0, 0.7);
              }
              .input-placeholder {
                font-size: 26rpx;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rpx;
                color: rgba(0, 0, 0, 0.5);
              }
            }
          }
          .actions {
            width: 100%;
            height: 50rpx;
            margin-top: 29rpx;
            padding-bottom: 40rpx;
            display: flex;
            justify-content: space-between;
            .action {
              width: 288rpx;
              height: 48rpx;
              background-color: #395cf5;
              border-radius: 20rpx;
              text-align: center;
              line-height: 48rpx;
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              line-height: 48rpx;
              color: #ffffff;
              text {
                &:first-child {
                  margin-right: 20rpx;
                }
              }
            }
            .search {
              background-color: #1534ce;
            }
          }
        }
      }
    }
  }
  .section-2 {
    width: 100%;
    // margin-top: 200rpx;
    .table-container {
      width: 100%;
      box-sizing: border-box;
      // padding: 0 40rpx;
      overflow-x: auto;
      height: calc(100vh - 105rpx);
      margin-top: 25rpx;
      overflow: auto;
      table {
        width: 100%;
        table-layout: fixed;
        border-top: 1rpx solid #ebebeb;
        border-left: 1rpx solid #ebebeb;
        th {
          font-size: 26rpx;
          color: #3b3c40;
          text-align: left;
          word-break: keep-all;
          white-space: nowrap;
          background-color: #e2eefe;
          padding: 30rpx 60rpx;
          text-align: center;
          border-bottom: 1rpx solid #ebebeb;
          border-right: 1rpx solid #ebebeb;
          position: sticky;
          top: 0;
          overflow: auto;
        }
        tr {
          th {
            &:nth-child(1) {
              position: sticky;
              left: 0;
              top: 0;
              z-index: 15;
            }
          }
          td {
            &:nth-child(1) {
              position: sticky;
              left: 0;
              z-index: 10;
            }
          }
        }
        td {
          font-size: 22rpx;
          color: #compare;
          // white-space: pre-line;  //合并空白符序列，但是保留换行符
          // word-wrap: break-word; //在长单词或+URL+地址内部进行换行
          // word-break: break-all; //允许在单词内换行
          // word-break: keep-all;
          // white-space: nowrap;
          text-align: left;
          padding-right: 20rpx;
          padding: 20rpx;
          border-bottom: 1rpx solid #ebebeb;
          border-right: 1rpx solid #ebebeb;
          text-align: center;
          background-color: #fff;
          overflow: auto;
        }
      }
    }
  }
}
</style>
